<template>
	<div class="content">
		<div class="title">
			<el-row class="demo-autocomplete">
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="今日注册:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="今日活跃:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="累计用户:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="今日充值额:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="今日利润:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="今日开箱次数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="今日礼品卡购买:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="3">
					<el-form class="demo-form-inline">
						<el-form-item label="今日装备购买:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<div id="myChart">

		</div>
		<div style="margin-top: 3%;">
			<el-row>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="第三方采购监控:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站账户剩余:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站取回件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站取回失败件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站账户剩余:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站取回件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站取回失败件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站账户剩余:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站取回件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="毛子站取回失败件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="人工发货购买件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="7">
					<el-form class="demo-form-inline">
						<el-form-item label="自动发货购买件数:" :label-width="formLabelWidth">
							<label style="color: #409EFF;">2131</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<div style="margin-top: 3%;">
			<el-row>
				<el-col :span="3">
					<el-button style="width: 80%;" type="primary" @click="PaymentSearch">每日用户充值TOP10</el-button>
				</el-col>
				<el-col :span="3">
					<el-button style="width: 80%;" type="primary" @click="PaymentSearch">用户总充值TOP10</el-button>
				</el-col>
				<el-col :span="3">
					<el-button style="width: 80%;" type="primary" @click="PaymentSearch">每日用户亏损TOP10</el-button>
				</el-col>
				<el-col :span="3">
					<el-button style="width: 80%;" type="primary" @click="PaymentSearch">每日用户盈利TOP10</el-button>
				</el-col>
			</el-row>
			<el-row style="margin-top: 3%;">
				<el-col>
					<el-table :data="tableDataOrdinaary" border style="width: 100%">
						<el-table-column prop="id" label="注册时间"></el-table-column>
						<el-table-column prop="createdAtStr" label="用户昵称"></el-table-column>
						<el-table-column prop="email" label="用户邮箱"></el-table-column>
						<el-table-column prop="nickname" label="充值金额"> </el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'hello',
		data() {
			return {
				formLabelWidth: '8vw'
			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				console.log(myChart)
				// 绘制图表
				myChart.setOption({
					title: {
						text: '增长情况'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#00ff00'
							}
						}
					},
					legend: {
						data: ['访问用户数', '登陆用户数', '新增用户数']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日','周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '访问用户数',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '登陆用户数',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [220, 182, 191, 234, 290, 330, 310,120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '新增用户数',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [150, 232, 201, 154, 190, 330, 410,120, 132, 101, 134, 90, 230, 210]
						}
					]
				});
			}
		}
	}
</script>
<style scoped>
	.content {
		width: 100%;
		height: 100%;
	}

	.title {
		width: 100%;
	}
	#myChart {
		width: 100%;
		height: 70%;
		margin-top: 3%;
	}
</style>
